
const MIN_DISTANCE = 10;

function getDirection(x, y) {
  if (x > y && x > MIN_DISTANCE) {
    return 'horizontal';
  }

  if (y > x && y > MIN_DISTANCE) {
    return 'vertical';
  }

  return '';
}

function getDirectionAxis(direction, xVal, yVal) {
  let res = '';
  if (direction == 'horizontal') {
    if (xVal > 0) {
      res = 'l';
    } else {
      res = 'r';
    }
  }
  if (direction == 'vertical') {
    if (yVal > 0) {
      res = 'b';
    } else {
      res = 't';
    }
  }
  return res;
}

const TouchMixin = Vue.extend({
  data() {
    return { mix_direction: '', mix_direction_axis:''};
  },

  methods: {
    mix_touchStart(event) {
      this.mix_resetTouchStatus();
      this.mix_startX = event.touches[0].clientX;
      this.mix_startY = event.touches[0].clientY;
    },

    mix_touchMove(event) {
      const touch = event.touches[0];
      this.mix_deltaX = touch.clientX - this.mix_startX;
      this.mix_deltaY = touch.clientY - this.mix_startY;
      this.mix_offsetX = Math.abs(this.mix_deltaX);
      this.mix_offsetY = Math.abs(this.mix_deltaY);
      this.mix_direction = this.mix_direction || getDirection(this.mix_offsetX, this.mix_offsetY);
      this.mix_direction_axis = getDirectionAxis(this.mix_direction, this.mix_deltaX, this.mix_deltaY)
    },

    mix_resetTouchStatus() {
      this.mix_direction = '';
      this.mix_direction_axis = '';
      this.mix_deltaX = 0;
      this.mix_deltaY = 0;
      this.mix_offsetX = 0;
      this.mix_offsetY = 0;
    }
  }
});
export default TouchMixin;
